<template>
  <div class="infobasemodal-page">
    <container-box :metaTitle="routeMeta.title || ''">
      <div slot="container">
        <mds-button type="primary" @click="openModal">详细信息弹框</mds-button>
        <mds-modal
            class="info-base-modal"
            :visibility="visibility"
            title="详细信息弹框"
            @ok="handleOk"
            width="936px"
            @close="handleClose"
            :mask="mask"
            :showClose="true"
        >
            <dl class="content">
                <dt>基础信息</dt>
                <dd>
                    <span class="label">姓名：</span>
                    <span>经纬（jingwei01）</span>
                </dd>
                <dd>
                    <span class="label">职级获得时间：</span>
                    <span>2019-02-21</span>
                </dd>
                <dd>
                    <span class="label">公司地址：</span>
                    <span>北京市朝阳区酒仙桥路</span>
                </dd>
                <dd>
                    <span class="label">商家联系方式：</span>
                    <span>13800138000</span>
                </dd>
                <dd>
                    <span class="label">任务状态：</span>
                    <span>进行中</span>
                </dd>
                <dd>
                    <span class="label">工作城市：</span>
                    <span>北京市朝阳区</span>
                </dd>
            </dl>
            <dl class="content">
                <dt>其他信息</dt>
                <dd>
                    <span class="label">姓名：</span>
                    <span>经纬（jingwei01）</span>
                </dd>
                <dd>
                    <span class="label">职级获得时间：</span>
                    <span>2019-02-21</span>
                </dd>
                <dd>
                    <span class="label">公司地址：</span>
                    <span>北京市朝阳区酒仙桥路</span>
                </dd>
                <dd>
                    <span class="label">商家联系方式：</span>
                    <span>13800138000</span>
                </dd>
                <dd>
                    <span class="label">任务状态：</span>
                    <span>进行中</span>
                </dd>
                <dd>
                    <span class="label">工作城市：</span>
                    <span>北京市朝阳区</span>
                </dd>
            </dl>
            <div slot="footer" style="text-align: right;">
                <Mds-button type="primary" @click='handleOk' style="margin-left: 8px;">
                保存
                </Mds-button>
                <Mds-button @click='handleOk' style="margin-left: 8px;">
                取消
                </Mds-button>
            </div>
        </mds-modal>
      </div>
    </container-box>
  </div>
</template>
<script>
import ContainerBox from '@/components/ContainerBox'
export default {
  components: {
    ContainerBox
  },
  computed: {
    routeMeta() {
      return this.$route.meta || {}
    }
  },
  data() {
    return {
      visibility: false,
      mask: true
    }
  },
  methods: {
    openModal() {
      this.visibility = true
    },
    handleOk() {
      this.visibility = false
    },
    handleClose() {
      this.visibility = false
    }
  }
}
</script>
<style>
    .info-base-modal .mds-modal-body{
      max-height: 430px;
      overflow-y: auto;
    }
    .info-base-modal .content {
        color: #354052;
        margin: -16px -24px 24px;
    }
    .info-base-modal .content dt {
        padding: 13px 33px 13px 23px ;
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 27px;
        font-weight: bold;
        color: #354052;
        background:rgba(250,250,253,1);
    }
    .info-base-modal .content dd{
        font-size: 14px;
        line-height: 22px;
        padding: 0 24px;
        margin-bottom: 16px;
    }
    .info-base-modal .content dd .label {
        display: inline-block;
        width: 98px;
        margin-right: 15px;
        text-align: right;
        color: #7F8FA4;
    }
</style>
